<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link rel="stylesheet" href="public/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="public/easyui/themes/icon.css" />
<script src="public/js/jquery.min.js"></script>
<script src="public/easyui/jquery.easyui.min.js"></script>
<script src="public/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="public/css/front_program.css" />
<div class="tab1">项目里程碑</div>
<div class="tab1_line"></div>
	<form action="save" method="post" >
	
		<table class="xmtable";border="1px" id="tab" width="100%">
			<tr>
				<td>计划内容</td>
				<td>实施时间</td>
				<td>需要的支持</td>
				<td>完成情况</td>
				<td>操作</td>
			</tr>
			<tbody id="tbody">
	
	<c:forEach items="${plans}" var="plans">
      	 <tr>
			<td>
				<input type="hidden" value="${param.id}" name="pid">
				<input type="hidden" value="${plans.id}" name="id">	
				<textarea rows="4" class="planContent"  style="border-radius:5px;width:100%" name="planContent" class="planContent">${plans.planContent}</textarea>
			</td>
			<td>
				<input type="date" value="${plans.startTime}" name="startTime" style="width:150px;height:22px;border-radius:5px;border:1px solid #bbb;" class="start"/>-
				<input type="date" value="${plans.endTime}" name="endTime" style="width:150px;height:22px;border-radius:5px;border:1px solid #bbb;" class="end"/>
			</td>
			<td><textarea rows="4" style="border-radius:5px;width:100%" name="support">${plans.support}</textarea></td>
			<td>
				<select  value="${plans.finish}" style="width:75px" data-options="panelHeight:'auto'" name="finish">
						<option>未开始</option>
						<option>进行中</option>
						<option>已完成</option>
				</select>
			</td>
			<td><a style="cursor: pointer" class="rm">删除<input type="hidden" value="0" id="count"></a></td>
		</tr>
	</c:forEach>
			
			
			</tbody>
		</table>
	
	
<br/>
<input type="button" value="增加一行" id="appendRow"/>
<input type="submit" value="保存" onclick="jc()" id="save"/>
</form>
<!-- 动态的创建行 -->
  <script type="text/html"  id="rowTpl">
	
       <tr>
			<input type="hidden" value="${param.id}" name="pid">
			<td>
				<textarea rows="4"  style="border-radius:5px;width:100%" name="planContent" class="planContent"></textarea>
			</td>
			<td>
				<input type="date" name="startTime" style="width:150px;height:22px;border-radius:5px;border:1px solid #bbb;"  class="start"/>-
				<input type="date" name="endTime" style="width:150px;height:22px;border-radius:5px;border:1px solid #bbb;" class="end"/>
			</td>
			<td><textarea rows="4" style="border-radius:5px;width:100%" name="support"></textarea></td>
			<td>
				<select class="easyui-combobox" style="width:75px" data-options="panelHeight:'auto'" name="finish">
						<option>未开始</option>
						<option>进行中</option>
						<option>已完成</option>
				</select>
			</td>
			<td><a style="cursor: pointer" class="rm">删除<input type="hidden" value="0" id="count"></a></td>
		</tr>

    </script>
    <script>
      $(function () {
	        var rowTpl = $("#rowTpl").html();
	        $("#appendRow").click(function () {
	          $("#tbody").append(rowTpl);
	        });
	   
	        $('table').on('click', '.rm', function () {
	          if (confirm("是否删除？")) {
	            var that = this;
	            if (that.dataset.id) {
	              $.get('stu/plan-rm.jsp', {id: this.dataset.id}, function () {
	                $(that).closest('tr').remove();
	              });
	            } else {
	              $(that).closest('tr').remove();
	            }
	          }
	        });	
      });   
    
    </script>